<template>
   <el-tabs v-model="activeTab" tab-position="left">
    <el-tab-pane name="tree" >
        <template #label>
            <el-tooltip content="大纲树" placement="right">
            <Icon icon="carbon:decision-tree" width="20px" height="20px"  />
            </el-tooltip>
        </template>
        <Tree />
    </el-tab-pane>
    <el-tab-pane name="library">
        <template #label>
            <el-tooltip content="组件库" placement="right">
            <Icon icon="carbon:bare-metal-server" width="20px" height="20px"/>
        </el-tooltip>
        </template>
        <Library />
    </el-tab-pane>
  </el-tabs> 
</template>

<script lang="ts" setup>
import {ref} from 'vue';
import Tree from './components/tree/index.vue';
import Library from './components/library/index.vue';

const activeTab = ref("library");

defineOptions({
    name: "Left",
})
</script>

<style scoped lang="scss">
.el-tabs {
    height: calc(100vh - 50px);
    background-color: #fff;
}
:deep() {
    .el-tabs__header {
        margin-right: 0!important;
    }
}   
</style>